<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索名称">
                <a-input v-model="queryParam.name" placeholder="请输入" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="搭配类型">
                <a-select v-model="queryParam.gender" placeholder="请选择" default-value="null" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="0">女装</a-select-option>
                  <a-select-option :value="1">男装</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="状态">
                <a-select v-model="queryParam.isactive" placeholder="请选择" default-value="null" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="'Y'">启用</a-select-option>
                  <a-select-option :value="'N'">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
                <a-button style="margin-left: 8px" type="primary" icon="plus" @click="handleAdd">新建</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false">
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps">
        <span slot="image" slot-scope="text, record">
          <img :src="record.img" alt="" style="width: 50px; height: 50px" />
        </span>
        <span slot="status" slot-scope="text">{{ text | status }}</span>

        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定启用吗?" ok-text="Yes" cancel-text="No" @confirm="handleEnable(record, 1)" v-if="record.isactive == 'Y'">
              <a href="#">启用</a>
            </a-popconfirm>
            <a-popconfirm title="确定禁用吗?" ok-text="Yes" cancel-text="No" @confirm="handleEnable(record, 0)" v-if="record.isactive == 'N'">
              <a href="#">禁用</a>
            </a-popconfirm>
          </template>
        </span>
      </s-table>
    </a-card>
    <LookEditDrawer ref="lookEditDrawer" :queryData="queryData" :uploadParams="uploadParams" @editOk="editOk"></LookEditDrawer>
  </div>
</template>
<script>
import { STable } from '@/views/box/components'
import { attrValueList } from '@/api/box/setting'
import { routeMixin } from '@/views/box/util/routeMixin'
import LookEditDrawer from './components/lookEditDrawer'
import { queryDim } from '@/api/goods'
import globalData from '@/assets/js/common'
const columns = [
  { title: '主题搭配ID', dataIndex: 'id', align: 'center' },
  { title: '图片', width: 100, dataIndex: 'innerName', align: 'center', scopedSlots: { customRender: 'image' } },
  { title: '名称', dataIndex: 'name', align: 'center' },
  { title: '搭配类型', dataIndex: 'gender', align: 'center' },
  { title: '创建时间', dataIndex: 'createTime', align: 'center' },
  { title: '状态', dataIndex: 'isactive', align: 'center', scopedSlots: { customRender: 'status' } },
  {
    title: '操作',
    fixed: 'right',
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  mixins: [routeMixin],
  components: {
    STable,
    LookEditDrawer
  },
  data() {
    return {
      columns: columns,

      // 查询条件参数
      queryParam: {
        name: '',
        gender: '',
        isactive: '',
        attrId: '13'
      },
      queryData: {},
      uploadParams: null,
      showEdit: false,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => this.fetchData(parameter)
    }
  },
  filters: {
    type(type) {
      if (type === 0) {
        return '现金券'
      } else if (type === 1) {
        return '折扣券'
      }
    },
    status(v) {
      return v == 'Y' ? '启用' : '禁用'
    }
  },
  created() {
    this.getQueryDim()
    this.initialPage()
  },
  methods: {
    editOk() {
      this.$refs.table.refresh()
    },
    getQueryDim() {
      queryDim().then(res => {
        if (res.code == 0) {
          this.queryData = res.data
        }
      })
    },
    async initialPage() {
      this.uploadParams = this.getUploadParams()

      this.showEdit = true
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] !== '' && values[i] !== undefined && values[i] !== null) {
          if (i === 'timePicker') {
            if (values[i].length) {
              formValue.startTime = values[i][0].format('YYYY-MM-DD HH:mm:ss')
              formValue.endTime = values[i][1].format('YYYY-MM-DD HH:mm:ss')
            }
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    },
    getQueryDim() {
      queryDim().then(res => {
        if (res.code == 0) {
          this.queryData = res.data
        }
      })
    },
    fetchData(parameter) {
      let params = {
        page: parameter,
        requestData: this.filterFields(this.queryParam)
      }
      return attrValueList(params).then(res => {
        if (res.code == 0) {
          res.data.forEach(item => {
            item.gender = item.gender == 0 ? '女装' : '男装'
          })
          return {
            data: res.data,
            page: res.page
          }
        } else {
          this.$message.warning(res.msg)
          return {
            data: [],
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            }
          }
        }
      })
    },
    handleAdd() {
      this.$refs.lookEditDrawer.showModal('add')
    },
    handleEdit(record) {
      this.$refs.lookEditDrawer.showModal(record)
    },
    handleEnable(record, e) {
      let params = {
        requestData: {
          id: record.id,
          status: e
        }
      }
      // activityCreate(params).then(res => {
      //   if (res.code == 0) {
      //     this.$message.success('修改成功！')
      //     this.$refs.table.refresh()
      //   } else {
      //     this.$message.warning(res.msg)
      //   }
      // })
    },
    searchList() {
      this.$refs.table.refresh(true)
    },
    resetList() {
      this.queryParam = {
        name: '',
        gender: '',
        isactive: '',
        attrId: '13'
      }
      this.$refs.table.refresh(true)
    },
    editOk() {
      this.queryParam = {
        name: '',
        gender: '',
        isactive: '',
        attrId: '13'
      }
      this.$refs.table.refresh()
    }
  }
}
</script>

